<!-- 主页面 -->
<template>
   <div class="common-layout">
      <el-container class="root-container">
         <el-header class="header">
            <HomeHeadr></HomeHeadr>
         </el-header>
         <el-container class="main-container">
            <el-aside class="aside" style='background-color:#545c64'>
               <HomeAside></HomeAside>
            </el-aside>
            <el-main class="main">
               <HomeMain></HomeMain>
            </el-main>
         </el-container>
      </el-container>
   </div>
</template>
<script setup>
import HomeAside from '../components/home/HomeAside.vue';
import HomeHeadr from '../components/home/HomeHeader.vue';
import HomeMain from '../components/home/HomeMain.vue';
</script>
<style scoped>
.root-container {
   /** 
    layout元素，首先要把 容器 的高度撑开
    撑满页面
  */
   height: 100vh;
}

.header {
   height: auto;
   padding: 0;
}

.main-container {
   border: 1px solid tomato;
}

.main {
   border: 1px solid yellowgreen;
}

.aside {
   width: unset;
}
</style>